import MainContainerCustom from '@/components/MainContainerCustom';
import { Button, Grid, GridItem, Image } from '@antmjs/vantui';
import { View } from '@tarojs/components';
import { navigateTo } from '@tarojs/taro';
import { CSpaceCustom } from '@vh-mobile/pro-components';
import { eventsBus, toast } from '@vh-mobile/pro-utils';
import { useEffect } from 'react';
import './index.less';
import { pages, pagesA } from '../../pages';
import testJpg from '@/assets/images/test.jpg';
import { pxTransform } from '@tarojs/taro';

export default function DemoIndex() {
  useEffect(() => {
    eventsBus.$on('indexEventsBus', () => {
      toast.success('触发首页事件');
    });

    return () => {
      eventsBus.$off('indexEventsBus');
    };
  }, []);

  const handleEvents = () => {
    navigateTo({
      url: '/pages/eventsBus/index',
    });
  };
  console.log(pagesA);

  return (
    <MainContainerCustom showTabbar tabbarActive="index">
      <View className="index">
        <Image
          width="100%"
          height={pxTransform(300)}
          src={`${OSS_URL}/static/images/assets/images/test.jpg`}
        />
        <Image src={testJpg} style={{ display: 'none' }} />
        <CSpaceCustom direction="vertical">
          <Button type="primary" block={true} onClick={handleEvents}>
            事件触发页面12222
          </Button>
          <View>上面的按钮的颜色已经通过全局主题重写覆盖了，参见src/style/index.less</View>
        </CSpaceCustom>

        <Grid gutter={10} columnNum={2}>
          {pages.map((item: any) => {
            const name = item.split('/')[1];
            return <GridItem icon="home-o" key={item} text={name} url={`/${item}`} />;
          })}
        </Grid>
        <Grid gutter={10} columnNum={2}>
          {pagesA.map((item: any) => {
            const name = item.split('/')[0];
            return <GridItem icon="home-o" key={item} text={name} url={`/pagesA/${item}`} />;
          })}
        </Grid>
      </View>
    </MainContainerCustom>
  );
}
